import styled from 'vue-styled-components'

export const StepsWrapper = styled.div`
  width: 100%;
  height: 46px;
  border-radius:4px;
  border: 1px solid #CFDAFA;
  overflow: hidden;
  background: ${props => props.theme.WHITE};
  .ant-steps{
    margin: 0 !important;
    box-shadow: none !important;
  }
  .ant-steps-navigation .ant-steps-item::before{
    display: none;
  }
`

export const StepsContainerWrapper = styled.div`
  margin-top: 12px;
  width: 100%;
  background: ${props => props.theme.WHITE};
  border-radius:4px;
  border: 1px solid #E5E5E5;
  box-sizing: border-box;
  padding: 40px 0 20px;
  .icon{
    text-align: center;
    margin-bottom: 16px;
    i{
      font-size: 44px;
      color: ${props => props.theme['success-color']};
    }
  }
  .title{
    color: ${props => props.theme.FONT_BLACK};
    font-size: 24px;
    font-weight: 500;
    margin-bottom: 16px;
    text-align: center;
  }
  .sub-title{
    font-size: 16px;
    font-weight: 400;
    color: #8C8C8C;
    margin-bottom: 40px;
    text-align: center;
  }
`
